<template>
    <div>
        <el-card>
            <!-- 查询表单 -->
            <el-form :inline="true" :model="checkdata">
                <el-form-item label="用户姓名">
                    <el-input v-model="checkdata.userName" placeholder="用户姓名" />
                </el-form-item>
                <el-form-item label="用户手机">
                    <el-input v-model="checkdata.phoneNumber" placeholder="用户手机" />
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="checkdata.addressDetail" placeholder="收货地址" />
                </el-form-item>
                <el-form-item label="商品名称">
                    <el-input v-model="checkdata.goodsName" placeholder="商品名称" />
                </el-form-item>
                <el-form-item label="订单创建日期">
                    <el-date-picker v-model="querytime" type="daterange" unlink-panels range-separator="到"
                        start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" />
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="checkdata.orderState" placeholder="请选择商品的类型">
                        <el-option v-for="item in orderStatedata" :key="item.orderState" :label="item.orderStateName"
                            :value="item.orderState" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onRefresh">
                        <el-icon>
                            <Refresh />
                        </el-icon>重置
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 订单信息展示表单 -->
            <el-table :data="orderdata" style="width: 100%">
                <el-table-column label="订单id" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="订单状态" width="80">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.orderState }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="商品名称" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="数量" width="60">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.itemAmount }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="总计" width="60">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.itemValue }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="订单创建时间" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.orderCreate }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="支付编号" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.payId }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="用户姓名" width="150">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.userName }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="用户手机" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.phoneNumber }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="收货地址" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.addressDetail }}元</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="250">
                    <template #default="scope">
                        <el-button size="small" v-if="scope.row.orderState == 2"
                            @click="shipments(scope.$index, scope.row)" type="primary">发货</el-button>
                        <el-button size="small" v-if="scope.row.orderState == 99"
                            @click="refund(scope.$index, scope.row)" type="primary">退款</el-button>
                        <el-button size="small" v-if="scope.row.orderState == 99"
                            @click="unrefund(scope.$index, scope.row)" type="primary">拒绝退款</el-button>
                    </template>
                </el-table-column>

            </el-table>

        </el-card>
    </div>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted, h } from "vue";
import { ElMessageBox, genFileId, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { useStore } from '../store/store'
import { checkorder } from '../api/order.js'

/*
    订单状态数据
*/
const orderStatedata = [
    {
        orderState: 99,
        orderStateName: '未关闭'
    },
    {
        orderState: 1,
        orderStateName: '未支付'
    },
    {
        orderState: 2,
        orderStateName: '已支付'
    },
    {
        orderState: 3,
        orderStateName: '已发货'
    },
    {
        orderState: 4,
        orderStateName: '已收货'
    },
    {
        orderState: 0,
        orderStateName: '已关闭'
    },
    {
        orderState: 5,
        orderStateName: '申请退款'
    },
    {
        orderState: 100,
        orderStateName: '全部'
    },
]

//查询表单数据
const checkdata = reactive({
    storeId :useStore.storeId,
    orderId: '',
    userName: '',
    phoneNumber: '',
    goodsName: '',
    addressDetail: '',
    startDate: '',
    endDate: '',
    orderCreate: '',
    orderState: 99,
    itemAmount: 0,
    itemValue: 0,
    payId: '',
})

//订单信息列表数据
const orderdata = ref();
//时间选择器
const querytime = ref();

/*
    时间选择器所需代码
*/
const shortcuts = [
    {
        text: '过去一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '过去一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '过去三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]

/*
  查询方法
*/
function query() {
    if(querytime.value.length!=0){
        checkdata.startDate=querytime.value[0].valueOf()+"";
        checkdata.endDate=querytime.value[1].valueOf()+"";
    }
    else{
        console.log("时间为空");
    }
    checkorder(checkdata)
        .then(function (res) {
            orderdata.value = res.data;
        })
        .catch(function (error) {
            console.log(error);
        });
}

/*
    刷新方法
*/
function onRefresh() {
    checkdata.userName = '';
    checkdata.phoneNumber = '';
    checkdata.goodsName = '';
    checkdata.addressDetail = '';
    checkdata.startDate = '';
    checkdata.endDate = '';
    querytime.value = '';
    checkdata.orderState = 99;
    query();
}

/*
    发货方法
*/
function shipments(index, row) {
    query();
}

/*
    退款方法
*/
function refund(index, row) {
    query();
}

/*
    拒绝退款方法
*/
function unrefund(index, row) {
    query();
}


</script>

<style scoped>

</style>